<template>
  <el-select v-model="value" :placeholder="props.placeholder" clearable filterable @change="change" class="select-wrap">
    <el-option v-for="item in currencyOptions" :key="item.value" :label="item.label" :value="item[valueKey]" />
  </el-select>
</template>
<script setup>
import useCommonStore from "@/store/modules/common"
const commonStore = useCommonStore()
const currencyOptions = computed(() => {
  if (!commonStore.currencyOptions) {
    commonStore.getCurrencyList()
  }
  return commonStore.currencyOptions
})
const props = defineProps({
  modelValue: [String, Number, Array],
  valueKey: {
    type: String,
    default: "value",
  },

  placeholder: {
    type: String,
    default: "请选择",
  },
})

const value = ref()
watch(
  () => props.modelValue,
  (val) => {
    value.value = val
  }
)
const emit = defineEmits(["update:modelValue", "change"])
const change = (val) => {
  const item = currencyOptions.value.find((i) => i.value == val)
  emit("update:modelValue", val)
  emit("change", item?.label)
}
defineExpose({
  currencyOptions,
})
</script>
